import React, { useState } from 'react';
import {  Tooltip } from 'antd';
import {  CloseOutlined, CheckOutlined, FormOutlined } from '@ant-design/icons';
import { getControl } from '../../Zform/controls';
import ZpanelTitle from '../../ZpanelTitle';
export default React.memo(function GroupNameEdit(props) {
    const { value, onChange } = props;
    const [inputValue, setInputValue] = useState();
    const [edited, setEdited] = useState(false);
    return (
        <>
            {!edited ? <ZpanelTitle>{value}</ZpanelTitle> : null}
            {edited ? (
                <div className="z-display-inline-block" style={{ width: '180px' }}>
                    {getControl('Input', {
                        size: 'small',
                        value: inputValue,
                        onChange: (value) => {
                            setInputValue(value);
                        }
                    })}
                </div>
            ) : null}
            {edited ? (
                <Tooltip placement="top" title="取消">
                    <div
                        className="z-live-tool-item all-border small delete z-margin-left-10"
                        onClick={() => {
                            setEdited(false);
                        }}
                    >
                        <CloseOutlined />
                    </div>
                </Tooltip>
            ) : null}
            {edited ? (
                <Tooltip placement="top" title="确定">
                    <div
                        className="z-live-tool-item all-border small z-margin-left-10"
                        onClick={() => {
                            const returner = typeof onChange === 'function' && onChange(inputValue);
                            if (returner) {
                                return;
                            }
                            setEdited(false);
                        }}
                    >
                        <CheckOutlined />
                    </div>
                </Tooltip>
            ) : null}
            {!edited ? (
                <Tooltip placement="top" title="修改组名">
                    <div
                        className="z-live-tool-item all-border small z-margin-left-10"
                        onClick={() => {
                            setEdited(true);
                            setInputValue(value);
                        }}
                    >
                        <FormOutlined />
                    </div>
                </Tooltip>
            ) : null}
        </>
    );
});
